<!-- 首页 -->
<template>
	<view class="home-container">
		<view class="home-loc-info">
			
		</view>
		<view class="home-now df fdc">
			<view class="df aic">
				<view class="point mr20">
				</view>
				<text class="home-text">现场工作</text>
			</view>
			<view class="df">
				<view @click="to_reloader" class="bg1">
					<img class="trans" src="../../static/imgs/trans.png" alt="" />
					<view class="df aic explain-text">
						<text class="arr-text">换装</text>
						<img class="arr" src="../../static/imgs/arr.png" alt="" />
					</view>
				</view>
				<view class="df fdc">
					<view class="bg2 df aic jcc">
						<img class="rob mr20" src="../../static/imgs/robot.png" alt="" />
						<text class="arr-text">营配贯通</text>
						<img class="arr mr10" src="../../static/imgs/arr.png" alt="" />
					</view>
					<view class="df">
						<view @click="toChangeTerminal" class="bg3 df fdc jcc aic">
							<img class="smi" src="../../static/imgs/zd.png" alt="" />
							<text class="arr-text mt10 ml20">换终端</text>
						</view>
						<view @click="to_my_proj" class="bg4 df fdc jcc aic">
							<img class="smi" src="../../static/imgs/proj.png" alt="" />
							<text class="arr-text mt10 ml20">我的项目</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="home-assets">
			<view class="df aic">
				<view class="point mr20">
				</view>
				<text class="home-text">资产管理</text>
			</view>
		</view>
		<view class="df aic">
			<view @click="to_item_page(item)" v-for="item in assets_box" :key="item" class="assets-item df aic jcc">
				<view :style="{'background':item.background}" class="df aic jcc assets-logo">
					<img class="arr" :src="item.url" alt="" />
				</view>
				<text class="mr10 spical">{{item.title}}</text>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
	import { ref } from 'vue';
	
	const assets_box = ref([
		{
			url:'../../static/imgs/finger.png',
			title:'领取新资产',
			background:' linear-gradient(231deg, #3EBFFF -8%, #3182EE 60%, #2D6CE8 123%, rgba(54, 127, 235, 0.8107) 123%);'
		},
		{
			url:'../../static/imgs/barcode.png',
			title:'领取表箱条码',
			background:'linear-gradient(217deg, #FFD940 , #FF9C00  90%);'
		}
	])
	
	const toChangeTerminal = ()=>{
		uni.redirectTo({
			url:'/pages/changeTerminal/changeTerminal'
		})
	}
	
	const to_my_proj = ()=>{
		uni.redirectTo({
			url:'/pages/project/project'
		})
	}
	
	const to_item_page = (item)=>{
		console.log(item);
		if(item.title === '领取新资产'){
			uni.redirectTo({
				url:'/pages/receiptNewAssets/receiptNewAssets'
			})
		}else if(item.title === '领取表箱条码'){
			uni.redirectTo({
				url:'/pages/receiptBoxBarCode/receiptBoxBarCode'
			})
		}
	}
	
	const to_reloader = ()=>{
		uni.redirectTo({
			url:'/pages/reloader/reloader'
		})
	}
</script>

<style lang="scss">
.home-loc-info{
	height: 120rpx;
	width: 100%;
	background-color: #252A35;
	border-radius: 24rpx;
}
.home-container{
	padding: 0 30rpx;
}
.home-text{
	font-size: 32rpx;
	font-weight: 600;
	line-height: 56rpx;
	color: #10151F;
}
.point{
	width: 14rpx;
	height: 14rpx;
	border-radius: 100rpx;
	background-color: #2D6CE8;
}
.bg1{
	width: 300rpx;
	height: 360rpx;
	background-image: url('');
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.bg2{
	width:420rpx;
	height: 190rpx;
	background-image: url('');
	background-repeat: no-repeat;
	background-size: cover;
}
.bg3{
	width: 200rpx;
	height: 160rpx;
	background-image: url('');
	background-repeat: no-repeat;
	background-size: cover;
}
.bg4{
	width: 200rpx;
	height: 160rpx;
	background-image: url('');
background-repeat: no-repeat;
	background-size: cover;
}
.trans{
	width: 90rpx;
	height: 90rpx;
	position: absolute;
	left: 50rpx;
	top: 50rpx;
}
.arr-text{
	font-size: 28rpx;
	color: #fff;
	font-weight: 400;
	margin-right: 20rpx;
}
.arr{
	width: 48rpx;
	height: 48rpx;
}
.explain-text{
	position: absolute;
	left: 50rpx;
	bottom: 80rpx;
}
.rob{
	width: 100rpx;
	height: 100rpx;
}
.smi{
	width: 50rpx;
	height: 50rpx;
}
.assets-item{
	width: 320rpx;
	height: 150rpx;
	box-shadow: 0px 0px 28px 0px rgba(83, 83, 83, 0.1);
	border-radius: 24rpx;
	margin-right: 40rpx;
	margin-top: 20rpx;
}
.assets-logo{
	width: 90rpx;
	height: 90rpx;
	margin-right: 20rpx;
	border-radius: 24rpx;
}
.spical{
	font-size: 28rpx;
	font-weight: 400;
	color: #10151F;
}
</style>
